<template>
  <div class="hello">
    <template v-if="reportData">
      <div class="card" style="display: flex;justify-content: space-between;">
        <div style="text-align: center;flex: 1;">
          <span style="color: #ff7875;font-weight: bold;font-size: 1rem;text-decoration: underline;">
            {{reportData.storeA.name}}
          </span>
        </div>
        <img src="../assets/switch.png" style="height: 20px;width: 20px;" alt="">
        <div style="text-align: center;flex: 1;">
          <span style="color: #40a9ff;font-weight: bold;font-size: 1rem;text-decoration: underline;">
            {{reportData.storeB.name}}
          </span>
        </div>
      </div>
  
      <div class="card">
        <div style="display: flex;flex-direction: column;">
          <div class="cook-item">
            <div style="flex: 1;border-right: 1px solid #ccc;">
              <img v-if="reportData.storeA.completionRate > reportData.storeB.completionRate" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color: #999;">{{reportData.storeA.completionRate}}%</h2>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">出菜完成率</span>
              </div>
            </div>
            <div style="flex: 1;">
              <img v-if="reportData.storeA.completionRate < reportData.storeB.completionRate" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color:#d77e02;">{{reportData.storeB.completionRate}}%</h2>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">出菜完成率</span>
              </div>
            </div>
          </div>
  
          <div class="cook-item">
            <div style="flex: 1;border-right: 1px solid #ccc;">
              <img v-if="reportData.storeA.dishCookingTime > reportData.storeB.dishCookingTime" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color: #999;">{{reportData.storeA.dishCookingTime}}</h2>
                <span>m</span>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">单菜平均制作时长</span>
              </div>
            </div>
            <div style="flex: 1;">
              <img v-if="reportData.storeB.dishCookingTime < reportData.storeA.dishCookingTime" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color:#d77e02;">{{reportData.storeB.dishCookingTime}}</h2>
                <span>m</span>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">单菜平均制作时长</span>
              </div>
            </div>
          </div>
  
          <div class="cook-item">
            <div style="flex: 1;border-right: 1px solid #ccc;">
              <img v-if="reportData.storeA.dishWaitingTime < reportData.storeB.dishWaitingTime" class="winner" src="../assets/good.png" style="right: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color:#d77e02;">{{reportData.storeA.dishWaitingTime}}</h2>
                <span>m</span>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">单菜等待时间</span>
              </div>
            </div>
            <div style="flex: 1;">
              <img v-if="reportData.storeA.dishWaitingTime > reportData.storeB.dishWaitingTime" class="winner" src="../assets/good.png" style="right: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color: #999;">{{reportData.storeB.dishWaitingTime}}</h2>
                <span>m</span>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">单菜等待时间</span>
              </div>
            </div>
          </div>
  
          <div class="cook-item">
            <div style="flex: 1;border-right: 1px solid #ccc;">
              <img v-if="reportData.storeA.orderMakingTime < reportData.storeB.orderMakingTime" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color: #999;">{{reportData.storeA.orderMakingTime}}</h2>
                <span>m</span>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">订单平均完成时间</span>
              </div>
            </div>
            <div style="flex: 1;">
              <img v-if="reportData.storeA.orderMakingTime > reportData.storeB.orderMakingTime" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color:#d77e02;">{{reportData.storeB.orderMakingTime}}</h2>
                <span>m</span>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">订单平均完成时间</span>
              </div>
            </div>
          </div>
  
          <div class="cook-item">
            <div style="flex: 1;border-right: 1px solid #ccc;">
              <img v-if="reportData.storeA.fifteenRate > reportData.storeB.fifteenRate" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color: #999;">{{reportData.storeA.fifteenRate}}%</h2>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">15分钟上菜完成率</span>
              </div>
            </div>
            <div style="flex: 1;">
              <img v-if="reportData.storeA.fifteenRate < reportData.storeB.fifteenRate" class="winner" src="../assets/good.png" style="left: 10px;" alt="">
              <div>
                <h2 style="display: inline-block;color:#d77e02;">{{reportData.storeB.fifteenRate}}%</h2>
              </div>
              <div>
                <span style="color:#0062b2;font-weight: bold;">15分钟上菜完成率</span>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="card">
        <div>
          <p class="title">厨师出菜率排行</p>
        </div>
  
        <div class="cook-race-item" v-for="(cook,index) in reportData.chefList" :key="index">
          <div class="race-index" :class="[cook.storeName === reportData.storeA.name ? 'first-store' : 'second-store']">{{cook.storeName.substring(0,1)}}</div>
          <div style="width: 100px;display: flex;flex-direction: column;padding-left: 10px;">
            <div style="text-align: left;">
              <span style="font-size: 2rem;color: #0062b2;font-weight: bold;margin-right: 4px;">{{index + 1}}</span>
              <p style="margin: 0;font-size: 1rem;font-weight: bold;margin-bottom: 2px;display: inline-block;">{{cook.chefName}}</p>
            </div>
          </div>
          <div style="flex: 1;display: flex;flex-direction: column; justify-content: center;align-items: center;">
            <div style="display: flex;">
              <h3 style="margin: 0;">{{cook.avgCookingTime}}m</h3>
            </div>
            <div>平均出菜</div>
          </div>
          <div style="flex: 1;display: flex;flex-direction: column; justify-content: center;align-items: center;">
            <div>
              <h3 style="margin: 0;">{{cook.completionRate}}%</h3>
            </div>
            <div>出菜率</div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <p class="tip-text">暂无数据</p>
    </template>
  </div>
</template>

<script>
  const axios = require('axios').default;

  export default {
    name: 'TwiceShop',
    props: {
      storeA: String,
      storeB: String,
      date: String
    },
    data() {
      return {
        reportData: null
      }
    },
    mounted() {
      axios.get(`${process.env.VUE_APP_BASE_URL}/twice.json?date=${this.date}&storeA=${this.storeA}&storeB=${this.storeB}`).then(res => {
          this.reportData = res.data
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .first-store{
    background-color: #ff7875;
  }

  .second-store{
    background-color: #40a9ff;
  }

  .tip-text{
    color: #999;
    line-height: 20rem;
  }

  h2 {
    margin: 0.8rem 0;
  }

  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .tag {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-right: 4px;
  }

  .card {
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px #ccc;
  }

  span {
    font-size: .8rem;
  }

  .title {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #0062b2;
  }

  .dish-item {
    line-height: 40px;
  }

  .cook-item {
    display: flex;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }

  .cook-item:last-child {
    border-bottom: none;
  }

  .cook-item div {
    position: relative;
  }

  .cook-item .winner {
    height: 18px;
    width: 18px;
    top: 50%;
    position: absolute;
  }

  .hello {
    padding-bottom: 50px;
  }

  .cook-race-item {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }

  .race-index {
    width: 50px;
    height: 50px;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 4px;
  }
</style>